<template>
  <div class="page-films" @scroll="onScroll">
    <van-nav-bar
      v-show="isShowNavBar"
      fixed
      title="电影"
      :left-text="curCityName"
      @click-left="$router.push({ name: 'city' })"
    />

    <van-tabs v-model:active="active" :class="{ show: isShowNavBar }" @change="onChange">
      <van-tab title="正在热映" name="nowPlaying"> </van-tab>
      <van-tab title="即将上映" name="comingSoon"> </van-tab>
    </van-tabs>

    <FilmList :type="type" />
  </div>
</template>

<script lang="ts" setup>
import { useCityStore } from '@/stores/city'
import FilmList from './components/film-list.vue'
import { FilmType } from '@/enums'

type FilmTypeType = 'nowPlaying' | 'comingSoon'

const route = useRoute()
const router = useRouter()
const { curCityName } = storeToRefs(useCityStore())

// 当前激活的类型
const active = ref<FilmTypeType>((route.query.active as FilmTypeType) || 'nowPlaying')
const type = computed(() => FilmType[active.value] as 1 | 2)
const isShowNavBar = ref(false)

function onChange(name: string) {
  console.log('onChange')
  // 1. 将 name 添加到url地址
  router.replace({
    name: 'films',
    query: {
      active: name
    }
  })
}

function onScroll(event: Event) {
  // console.log('onScroll', event.target.scrollTop)
  const scrollTop = (event.target as HTMLDivElement).scrollTop
  isShowNavBar.value = scrollTop >= 50
}
</script>

<style scoped>
.page-films {
  height: 100%;
  overflow-y: auto;
}

.van-tabs {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

.show {
  top: 46px;
}
</style>
